import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:meco/common/index.dart';
import 'package:meco/common/utils/constants.dart';
import 'package:meco/main.dart';

import 'index.dart';

class RegisterPage extends GetView<RegisterController> {
  const RegisterPage({super.key});

  // 构建背景
  Widget _buildBackground() {
    return Positioned.fill(
      child: Image.asset(Images.startBg, fit: BoxFit.cover),
    );
  }

  // 构建注册卡片
  Widget _buildRegisterCard() {
    return Container(
      padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 30.h),
      decoration: BoxDecoration(
        color: Color(0xFF2D5BAB),
        borderRadius: BorderRadius.circular(20.r),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.2),
            blurRadius: 10,
            offset: Offset(0, 10),
          ),
        ],
      ),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          // 标题
          Text(
            "Register",
            style: TextStyle(
              color: Colors.white,
              fontSize: 32.sp,
              fontWeight: FontWeight.bold,
            ),
          ),

          // 分隔线
          Container(
            width: 30.w,
            height: 3.h,
            margin: EdgeInsets.only(top: 10.h, bottom: 30.h),
            decoration: BoxDecoration(
              color: Colors.white,
              borderRadius: BorderRadius.circular(1.5.r),
            ),
          ),

          // 用户名输入框
          _buildTextField(
            controller: controller.usernameController,
            hintText: "Enter Your Name",
            prefixIcon: null,
            validator: null,
            textInputAction: TextInputAction.next,
            focusNode: controller.usernameFocusNode,
            nextFocus: controller.passwordFocusNode,
          ),
          SizedBox(height: 12.h),

          // 密码输入框
          Obx(
            () => _buildTextField(
              controller: controller.passwordController,
              hintText: "Input Password",
              prefixIcon: null,
              obscureText: controller.obscurePassword.value,
              suffixIcon: IconButton(
                icon: Icon(
                  controller.obscurePassword.value
                      ? Icons.visibility_off
                      : Icons.visibility,
                  color: Colors.white70,
                ),
                onPressed: controller.togglePasswordVisibility,
              ),
              validator: null,
              textInputAction: TextInputAction.next,
              focusNode: controller.passwordFocusNode,
              nextFocus: controller.confirmPasswordFocusNode,
            ),
          ),
          SizedBox(height: 12.h),

          // 确认密码输入框
          Obx(
            () => _buildTextField(
              controller: controller.confirmPasswordController,
              hintText: "Confirm Password",
              prefixIcon: null,
              obscureText: controller.obscureConfirmPassword.value,
              suffixIcon: IconButton(
                icon: Icon(
                  controller.obscureConfirmPassword.value
                      ? Icons.visibility_off
                      : Icons.visibility,
                  color: Colors.white70,
                ),
                onPressed: controller.toggleConfirmPasswordVisibility,
              ),
              validator: null,
              textInputAction: TextInputAction.done,
              onEditingComplete: controller.register,
              focusNode: controller.confirmPasswordFocusNode,
            ),
          ),
          SizedBox(height: 60.h),

          // 注册按钮
          _buildRegisterButton(),
          SizedBox(height: 15.h),

          // Apple登录按钮
          _buildAppleLoginButton(),
        ],
      ),
    );
  }

  // 注册按钮
  Widget _buildRegisterButton() {
    return SizedBox(
      width: double.infinity,
      height: 50.h,
      child: ElevatedButton(
        onPressed: controller.register,
        style: ElevatedButton.styleFrom(
          backgroundColor: Color(0xFF5490EE),
          foregroundColor: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(25.r),
          ),
          elevation: 0,
        ),
        child: Text(
          "Register",
          style: TextStyle(fontSize: 18.sp, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }

  // Apple登录按钮
  Widget _buildAppleLoginButton() {
    return SizedBox(
      width: double.infinity,
      height: 50.h,
      child: ElevatedButton(
        onPressed: () {},
        style: ElevatedButton.styleFrom(
          backgroundColor: Colors.black,
          foregroundColor: Colors.white,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10.r),
          ),
          elevation: 0,
        ),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.apple, size: 24.w, color: Colors.white),
            SizedBox(width: 10.w),
            Text(
              "Continue with Apple",
              style: TextStyle(
                fontSize: 14.sp,
                fontWeight: FontWeight.w600,
                fontFamily: "Inter",
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 输入框
  Widget _buildTextField({
    required TextEditingController controller,
    required String hintText,
    IconData? prefixIcon,
    bool obscureText = false,
    Widget? suffixIcon,
    String? Function(String?)? validator,
    TextInputAction? textInputAction,
    VoidCallback? onEditingComplete,
    FocusNode? focusNode,
    FocusNode? nextFocus,
  }) {
    return TextFormField(
      controller: controller,
      focusNode: focusNode,
      obscureText: obscureText,
      textInputAction: textInputAction,
      onEditingComplete:
          onEditingComplete ??
          () {
            if (nextFocus != null) {
              nextFocus.requestFocus();
            }
          },
      style: TextStyle(color: Colors.white, fontSize: 16.sp),
      decoration: InputDecoration(
        hintText: hintText,
        hintStyle: TextStyle(color: Colors.white60, fontSize: 16.sp),
        prefixIcon:
            prefixIcon != null ? Icon(prefixIcon, color: Colors.white70) : null,
        suffixIcon: suffixIcon,
        filled: true,
        fillColor: Colors.white.withOpacity(0.2),
        border: OutlineInputBorder(
          borderRadius: BorderRadius.circular(30.r),
          borderSide: BorderSide.none,
        ),
        contentPadding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 16.h),
        errorStyle: TextStyle(color: Colors.redAccent, fontSize: 12.sp),
      ),
      textAlign: TextAlign.start,
      validator: validator,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: [
          // 背景
          _buildBackground(),

          // 内容
          SafeArea(
            child: Padding(
              padding: EdgeInsets.symmetric(horizontal: 20.w),
              child: Column(
                children: [
                  // 返回按钮
                  Align(
                    alignment: Alignment.topLeft,
                    child: GestureDetector(
                      onTap: () => Get.back(),
                      child: Icon(
                        IconFontIcons.iconBack,
                        color: Colors.white,
                        size: 24.w,
                      ),
                    ),
                  ),
                  SizedBox(height: 72.7.h),

                  // 注册卡片
                  SizedBox(
                    height: 525.3.h,
                    width: 374.w,
                    child: Center(
                      child: SingleChildScrollView(
                        child: Form(
                          key: controller.formKey,
                          child: _buildRegisterCard(),
                        ),
                      ),
                    ),
                  ),

                  // 登录入口
                  SizedBox(height: 10.h),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      Text(
                        "Already have an account? ",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 12.sp,
                          fontFamily: "Inter",
                        ),
                      ),
                      GestureDetector(
                        onTap: controller.goToLogin,
                        child: Text(
                          "Login",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 12.sp,
                            fontWeight: FontWeight.w600,
                          ),
                        ),
                      ),
                    ],
                  ),
                  Spacer(),

                  // 条款和隐私政策
                  RichText(
                    textAlign: TextAlign.center,
                    text: TextSpan(
                      text: "By Continuing you agree with ",
                      style: TextStyle(
                        color: Colors.white.withOpacity(0.7),
                        fontSize: 10.sp,
                        fontFamily: "Inter",
                      ),
                      children: [
                        TextSpan(
                          text: "Terms of Service",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 10.sp,
                            fontWeight: FontWeight.w600,
                            decoration: TextDecoration.underline,
                            decorationColor: Colors.white,
                            decorationThickness: 1,
                          ),
                          recognizer: TapGestureRecognizer()..onTap = () {},
                        ),
                        TextSpan(
                          text: " & ",
                          style: TextStyle(
                            color: Colors.white.withOpacity(0.7),
                            fontSize: 10.sp,
                            fontFamily: "Inter",
                          ),
                        ),
                        TextSpan(
                          text: "Privacy Policy",
                          style: TextStyle(
                            color: Colors.white,
                            fontSize: 10.sp,
                            fontWeight: FontWeight.w600,
                            fontFamily: "Inter",
                            decoration: TextDecoration.underline,
                            decorationColor: Colors.white,
                            decorationThickness: 1,
                          ),
                          recognizer: TapGestureRecognizer()..onTap = () {},
                        ),
                      ],
                    ),
                  ),
                  SizedBox(height: 10.h),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}
